// 1 导入相关包
// import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 组件定义规则，就是定义一个函数
// 函数定义组件
function Hello1() {
  return <div>我是函数定义组件</div>;
}

// 函数表达式组件
const Hello2 = function () {
  return <button>我是函数表达式组件</button>;
};

// 箭头函数组件
const Hello3 = () => <div>我是箭头函数组件</div>;

// 渲染
// 组件的使用规则
root.render(
  <div>
    <Hello1 />
    <Hello2 />
    <Hello3 />
  </div>
);
